<template>
<div>
  <div v-if="userInfo.characterId == 1" class="tb-head">
    <el-button icon="plus" @click="handleAdd">新建架构</el-button>
  </div>
  <el-table v-loading="tbLoading" element-loading-text="拼命加载中" :data="groups" stripe style="width: 100%" class="table">
    <el-table-column prop="gName" label="架构" className="is-center">
    </el-table-column>
    <el-table-column prop="gUserNum" label="架构用户数" className="is-center">
      <template slot-scope="scope">
        <el-button type="text" @click="$router.push({name: 'User', params: {gid: scope.row.gid}})">{{scope.row.gUserNum}}</el-button>
      </template>
    </el-table-column>
    <el-table-column label="操作" className="is-center">
      <template slot-scope="scope">
        <el-button size="small" type="text" @click="handleModify(scope.row)">编辑</el-button>
        <el-button v-if="!scope.row.gUserNum" size="small" type="text" class="red"
          @click="handleDel(scope.row.gid)">删除</el-button>
        <el-tooltip v-else class="item" effect="dark" content="该架构下有用户，不可删除" placement="bottom" :enterable="false">
          <span class="btn-wrap"><el-button size="small" type="text" class="red" disabled>删除</el-button></span>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
  <!-- 添加/编辑弹层 -->
  <el-dialog :title="dialogName" :visible.sync="dialogVisible" width="30%">
    <el-form :model="form" label-width="70px">
      <el-form-item label="架构名称">
        <el-input v-model="form.name" auto-complete="off" placeholder="不超过8个字" :maxlength="8"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="saving">保存</el-button>
    </div>
  </el-dialog>
</div>
</template>
<script>
  import { mapState, mapActions } from 'vuex'
  export default {
    data () {
      return {
        dialogVisible: false,
        dialogName: '新建架构',
        form: {
          name: ''
        },
        tbLoading: true,
        saving: false
      }
    },
    activated () {
      this.getGroupList().then(() => {
        this.tbLoading = false
      })
    },
    computed: {
      ...mapState({
        groups: state => state.sysManage.groups,
        userInfo: state => state.userInfo
      })
    },
    methods: {
      ...mapActions(['getGroupList', 'addGroup', 'delGroup', 'modifyGroup']),
      handleAdd: function () {
        this.dialogName = '新建架构'
        this.dialogVisible = true
        this.form.name = ''
      },
      handleModify: function (data) {
        this.dialogName = '编辑架构'
        this.dialogVisible = true
        this.form.name = data.gName
        this.form.gid = data.gid
      },
      handleSubmit: function () {
        if (this.dialogName === '新建架构') {
          this.saving = true
          this.addGroup({name: this.form.name}).then(res => {
            if (res.data.code === 1) {
              this.dialogVisible = false
              this.saving = false
              this.$message({
                type: 'success',
                message: '添加成功!'
              })
              this.getGroupList()
            }
          }).finally(() => {
            this.saving = false
          })
        } else if (this.dialogName === '编辑架构') {
          this.saving = true
          this.modifyGroup({gid: this.form.gid, name: this.form.name}).then(res => {
            if (res.data.code === 1) {
              this.dialogVisible = false
              this.$message({
                type: 'success',
                message: '修改成功'
              })
              this.getGroupList()
            }
          }).finally(res => {
            this.saving = false
          })
        }
      },
      handleDel: function (gid) {
        this.$confirm('是否确认删除？', '提示', {
          type: 'warning'
        }).then(() => {
          return this.delGroup({gid: gid})
        }).then((res) => {
          if (res.data.code === 1) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getGroupList()
          }
        }).catch(() => {})
      }
    }
  }
</script>
